<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 重置标签默认的盒子属性 */
        *{
            margin: 0;
            padding: 0;
        }

        div{
            width: 200px;
            height: 200px;
        }
        .d1{
            background: #ccc;

            /*
                border
             */
            /*border-top: 4px solid red;*/
            /*border-right: 2px dashed blue;*/
            /*border-bottom: 6px dotted red;*/
            /*border-left: 8px solid green;*/
            border: 4px solid red;
            /*border-bottom: 2px solid red;*/


            /*
                padding
            */
            /*padding-left: 20px;*/
            /*padding-top: 10px;*/
            /*padding-right: 40px;*/
            /*padding-bottom: 20px;*/
            padding: 20px;
            /*padding: 20px 40px;*/
            /*padding: 20px 40px 30px;*/
            /*padding: 20px 10px 40px 20px;*/


            /*
                margin
             */
            /*margin-bottom: 50px;*/
            /*margin-left: 30px;*/
            /*margin-top: 40px;*/
            /*margin-right: 20px;*/
            /*margin: 50px;*/
            /*margin: 20px 50px;*/
            /* 盒子的水平居中 */
            /*margin: 20px auto;*/
            /* 文本的水平居中 */
            text-align: center;
            /* 文本的垂直居中 */
            line-height: 200px;
        }
        .d2{
            background: #999;
        }
    </style>
</head>
<body>
    <div class="d1">div1</div>
    <div class="d2">div2</div>
</body>
</html>